'use strict';
import React,{Component} from 'react';
import {
	Text,
	View,
    StyleSheet,
} from 'react-native';

import px2dp from '../utils/px2dp';
class WeatherTop extends Component{
  constructor(props){
    super(props);
  }
  render(){

	  //目前不需要使用延时加载策略了
      return(
		  <View style={styles.container}>
			  <View style={styles.cityAndTimeContainer}>
				  <Text style={styles.city}>
                      {this.props.basic.city}
				  </Text>
				  <Text style={styles.updateTime}>
                      {this.props.basic.update.loc.substring(11, 16)}
				  </Text>
			  </View>
			  <View style={styles.temperatureContainer}>
				  <Text style={styles.temperature}>
                      {this.props.nowWeather.tmp}°C
				  </Text>
			  </View>
			  <View style={styles.weatherInfoContainer}>
				  <Text style={styles.weatherInfoStyle}>
                      {this.props.nowWeather.cond.txt}
				  </Text>
			  </View>
		  </View>
      );

  }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        height: 150,
        backgroundColor: '#aa78d1dd',
    },
    cityAndTimeContainer: {
        flexDirection: 'row',
        flex: 1,
        paddingTop: 12,
        paddingBottom: 12,
    },
    city: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        fontSize: 20,
        marginLeft: 100,
        // backgroundColor: '#48BBEC',
        fontWeight: 'bold',
        color: '#fff',
    },
    updateTime: {
        textAlign: 'right',
        paddingRight: px2dp(12),
        width: 100,
        fontSize: 16,
        // alignItems:'center',
        color: '#fff',
    },
    temperatureContainer: {
        flex: 2,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    temperature: {
        textAlign: 'right',
        paddingRight: px2dp(12),
        fontSize: 35,
        color: '#fff',
    },
    weatherInfoContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    weatherInfoStyle: {
        paddingRight: px2dp(12),
        textAlign: 'right',
        fontSize: 20,
        color: '#fff',
    },
});

module.exports = WeatherTop;
